<template>
    <div class="tw:mb-8">
        <h2 class="标题">justify-start</h2>
        <div class="弹性容器 tw:justify-start">
            <div class="项目" v-for="i in 3" :key="i">项目 {{ i }}</div>
        </div>
        <p class="注释">网格从弹性容器左侧开始排列, 无额外间隙</p>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">justify-center</h2>
        <div class="弹性容器 tw:justify-center">
            <div class="项目" v-for="i in 3" :key="i">项目{{ i }}</div>
        </div>
        <p class="注释">网格在弹性容器中水平居中</p>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">justify-end</h2>
        <div class="弹性容器 tw:justify-end">
            <div class="项目" v-for="i in 3" :key="i">项目{{ i }}</div>
        </div>
        <p class="注释">网格在弹性容器中右侧开始排列</p>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">justify-between</h2>
        <div class="弹性容器 tw:justify-between">
            <div class="项目" v-for="i in 3" :key="i">项目{{ i }}</div>
        </div>
        <p class="注释">首尾网格紧贴弹性容器, 中间网格均匀分布</p>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">justify-around</h2>
        <div class="弹性容器 tw:justify-around">
            <div class="项目" v-for="i in 3" :key="i">项目{{ i }}</div>
        </div>
        <p class="注释">网格周图间距相等, 但距边缘间距减半</p>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">justify-evenly</h2>
        <div class="弹性容器 tw:justify-evenly">
            <div class="项目" v-for="i in 3" :key="i">项目{{ i }}</div>
        </div>
        <p class="注释">周图间距相等, 与边缘距离也相同</p>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">justify-items-start</h2>
        <div class="网格容器 tw:justify-items-start">
            <div class="项目" v-for="i in 3" :key="i">项目{{ i }}</div>
        </div>
        <p class="注释">项目在网格中从左侧开始排列</p>
    </div>
    
    <div class="tw:mb-8">
        <h2 class="标题">justify-items-end</h2>
        <div class="网格容器 tw:justify-items-end">
            <div class="项目" v-for="i in 3" :key="i">项目{{ i }}</div>
        </div>
        <p class="注释">项目在网格中从右侧开始排列</p>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">justify-items-center</h2>
        <div class="网格容器 tw:justify-items-center">
            <div class="项目" v-for="i in 3" :key="i">项目{{ i }}</div>
        </div>
        <p class="注释">项目在网格中从中间开始排列</p>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">justify-items-stretch</h2>
        <div class="网格容器 tw:justify-items-stretch">
            <div class="项目" v-for="i in 3" :key="i">项目{{ i }}</div>
        </div>
        <p class="注释">项目在网格中从左侧开始排列</p>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">justify-self-*</h2>
        <div class="网格容器 tw:justify-items-strech">
            <div class="项目 tw:justify-self-auto">01</div>
            <div class="项目 tw:justify-self-start">02</div>
            <div class="项目 tw:justify-self-center">03</div>
            <div class="项目 tw:justify-self-end">04</div>
            <div class="项目 tw:justify-self-stretch">05</div>
            <div class="项目 tw:justify-self-end-safe">06</div>
        </div>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">content-start</h2>
        <div class="网格容器 tw:content-start">
            <div class="项目">01</div>
            <div class="项目">02</div>
            <div class="项目">03</div>
            <div class="项目">04</div>
            <div class="项目">05</div>
        </div>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">content-center</h2>
        <div class="网格容器 tw:content-center">
            <div class="项目">01</div>
            <div class="项目">02</div>
            <div class="项目">03</div>
            <div class="项目">04</div>
            <div class="项目">05</div>
        </div>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">content-end</h2>
        <div class="网格容器 tw:content-end">
            <div class="项目">01</div>
            <div class="项目">02</div>
            <div class="项目">03</div>
            <div class="项目">04</div>
            <div class="项目">05</div>
        </div>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">content-between</h2>
        <div class="网格容器 tw:content-between">
            <div class="项目">01</div>
            <div class="项目">02</div>
            <div class="项目">03</div>
            <div class="项目">04</div>
            <div class="项目">05</div>
            <div class="项目">06</div>
            <div class="项目">07</div>
            <div class="项目">08</div>
            <div class="项目">09</div>
        </div>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">content-around</h2>
        <div class="网格容器 tw:content-around">
            <div class="项目">01</div>
            <div class="项目">02</div>
            <div class="项目">03</div>
            <div class="项目">04</div>
            <div class="项目">05</div>
            <div class="项目">06</div>
            <div class="项目">07</div>
            <div class="项目">08</div>
            <div class="项目">09</div>
        </div>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">content-evenly</h2>
        <div class="网格容器 tw:content-evenly">
            <div class="项目">01</div>
            <div class="项目">02</div>
            <div class="项目">03</div>
            <div class="项目">04</div>
            <div class="项目">05</div>
            <div class="项目">06</div>
            <div class="项目">07</div>
            <div class="项目">08</div>
            <div class="项目">09</div>
        </div>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">content-stretch</h2>
        <div class="网格容器 tw:content-stretch">
            <div class="项目">01</div>
            <div class="项目">02</div>
            <div class="项目">03</div>
            <div class="项目">04</div>
            <div class="项目">05</div>
            <div class="项目">06</div>
            <div class="项目">07</div>
            <div class="项目">08</div>
            <div class="项目">09</div>
        </div>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">items-start</h2>
        <div class="网格容器 tw:items-start">
            <div class="项目">01</div>
            <div class="项目">02</div>
            <div class="项目">03</div>
            <div class="项目">04</div>
            <div class="项目">05</div>
            <div class="项目">06</div>
            <div class="项目">07</div>
            <div class="项目">08</div>
            <div class="项目">09</div>
        </div>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">items-stretch</h2>
        <div class="网格容器 tw:items-stretch">
            <div class="项目">01</div>
            <div class="项目">02</div>
            <div class="项目">03</div>
            <div class="项目">04</div>
            <div class="项目">05</div>
            <div class="项目">06</div>
            <div class="项目">07</div>
            <div class="项目">08</div>
            <div class="项目">09</div>
        </div>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">items-start</h2>
        <div class="网格容器 tw:items-start">
            <div class="项目">01</div>
            <div class="项目">02</div>
            <div class="项目">03</div>
            <div class="项目">04</div>
            <div class="项目">05</div>
            <div class="项目">06</div>
            <div class="项目">07</div>
            <div class="项目">08</div>
            <div class="项目">09</div>
        </div>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">items-center</h2>
        <div class="网格容器 tw:items-center">
            <div class="项目">01</div>
            <div class="项目">02</div>
            <div class="项目">03</div>
            <div class="项目">04</div>
            <div class="项目">05</div>
            <div class="项目">06</div>
            <div class="项目">07</div>
            <div class="项目">08</div>
            <div class="项目">09</div>
        </div>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">items-end</h2>
        <div class="网格容器 tw:items-end">
            <div class="项目">01</div>
            <div class="项目">02</div>
            <div class="项目">03</div>
            <div class="项目">04</div>
            <div class="项目">05</div>
            <div class="项目">06</div>
            <div class="项目">07</div>
            <div class="项目">08</div>
            <div class="项目">09</div>
        </div>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">items-baseline</h2>
        <div class="网格容器 tw:items-baseline">
            <div class="项目" style="padding-top: 8px;padding-bottom: 24px;">01</div>
            <div class="项目" style="padding-top: 32px;padding-bottom: 48px;">02</div>
            <div class="项目" style="padding-top: 48px;padding-bottom: 16px;">03</div>
        </div>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">self-*</h2>
        <div class="网格容器 tw:items-stretch">
            <div class="项目 tw:self-auto">01</div>
            <div class="项目 tw:self-start">02</div>
            <div class="项目 tw:self-end">03</div>
            <div class="项目 tw:self-end-safe">04</div>
            <div class="项目 tw:self-center">05</div>
            <div class="项目 tw:self-center-safe">06</div>
            <div class="项目 tw:self-stretch">07</div>
            <div class="项目 tw:self-baseline">08</div>
            <div class="项目 tw:self-baseline-last">09</div>
        </div>
    </div>

    <div class="tw:mb-8">
        <h2 class="标题">place-content-center</h2>
        <div class="双向容器 tw:place-content-center">
            <div class="双向项目">01</div>
            <div class="双向项目">02</div>
            <div class="双向项目">03</div>
            <div class="双向项目">04</div>
        </div>
    </div>

</template>

<style scoped="">
    @reference '@/tailwind.css';
    .标题 {
        @apply tw:text-xl tw:font-semibold tw:mb-2;
    }
    .弹性容器 {
        @apply tw:flex tw:bg-gray-200 tw:p-4 tw:rounded-md tw:gap-4;
    }
    .网格容器 {
        @apply tw:grid tw:grid-cols-3 tw:bg-gray-200 tw:p-4 tw:rounded-md tw:gap-4 tw:h-96;
    }
    .双向容器 {
        @apply tw:grid tw:grid-cols-2 tw:gap-4 tw:h-96 tw:bg-gray-100;
    }
    .项目 {
        @apply tw:bg-blue-500 tw:text-white tw:p-4 tw:rounded-md tw:flex tw:min-h-8;
        @apply tw:justify-center tw:items-center;
    }
    .双向项目 {
        @apply tw:bg-blue-500 tw:p-4 tw:text-white
    }
    .注释 {
        @apply tw:mt-2 tw:text-gray-700;
    }
</style>
